import React, { useReducer } from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'

import { reducer, initialState, StoreContext } from '@/store'

import routers from '@/routers/index'

import '@/scss/style.scss'

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <StoreContext.Provider value={{ state, dispatch }}>
      <Router basename="/">
        <Switch>
          {routers.map((route, i) => {
            return (
              <Route
                key={i}
                exact
                path={route.path}
                component={route.component}
              />
            )
          })}
        </Switch>
      </Router>
    </StoreContext.Provider>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))
